<template>
	<div style="height: 100%;">
		<div class="top">
			<p class="rule" @click="show">规则</p>
		</div>
		<div class="box">
			<p class="title"></p>
			<van-pull-refresh v-model="isRefresh" @refresh="onRefresh" success-text="刷新成功">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
					<div class="good" v-for="(item, index) in list" :key="index">
						<img class="good-pic" :src="item.pic" alt />
						<div class="over-pic" v-if="item.receiveStatus || item.isPurchase">
							<div>
								<div>{{ item.isPurchase ? '已购买' : '已抢完' }}</div>
							</div>
						</div>
						<div class="info">
							<div class="title">{{ item.title }}</div>
							<p class="num">
								<span class="sy">仅剩{{ item.stock }}件</span>
								<span class="line"></span>
								<span class="xl">已售{{ item.sale }}件</span>
							</p>
							<p class="momey">
								¥
								<span class="zero">{{ parseInt(item.price - item.allowanceMoney) }}</span>
								<span class="cen">补贴价</span>
								<span class="past">{{ item.price }}</span>
							</p>
							<div class="btn" v-if="item.couponId" :class="[item.receiveStatus || item.isPurchase ? 'btn_d' : 'btn_c']">
								<div class="lef">
									<p>补贴金</p>
									<span style="font-weight: bold;">¥{{ item.allowanceMoney }}</span>
								</div>
								<div class="rig" @click="toCoupon(item)">立即领取</div>
							</div>
							<div class="btn2" v-else>
								立即领取
							</div>
						</div>
						<img src="../../assets/images/free/tip.png" alt class="tip" />
					</div>
					<van-skeleton :row="3" avatar :loading="loading" v-for="item in 3" :key="item"></van-skeleton>
				</van-list>
			</van-pull-refresh>
		</div>
		<!-- <img src="../../assets/images/free/red.gif" alt class="gif" @click="toZFX" /> -->
		<!-- 规则弹窗 -->
		<rules ref="rules" :rule="rule"></rules>
		<div class="flex-icon" @click="toZFX">
			<img class="flex-icon__img" :class="isYao ? 'active' : ''" src="../../assets/images/free/red.png" />
			<div class="flex-icon__value" :class="isAnimation ? 'active' : ''">您有188补贴金待领取哦</div>
		</div>
	</div>
</template>

<script>
import { List, Skeleton, Dialog, PullRefresh } from 'vant';
import { getStore, setStore, removeStore } from '@/utils/store';
import rules from './component/rules';
import axios from 'axios';
import store from 'store';
export default {
	components: {
		'van-list': List,
		'van-skeleton': Skeleton,
		'van-pull-refresh': PullRefresh,
		rules
	},
	data() {
		return {
			loading: false,
			finished: false,
			params: {
				page: 1,
				size: 10,
				activityType: 1
			},
			list: [],
			rule: {},
			isRefresh: false,
			isYao: false,
			isAnimation: false
		};
	},
	created() {
		// this.getSelfToken();
		this.getRule();
		this.selfStatistics();
	},
	mounted() {
		setTimeout(() => {
			this.isAnimation = true;
			this.move();
		}, 600);
	},
	methods: {
		selfStatistics() {
			let selfInfo = getStore('selfInfo');
			console.log('============');
			console.log(selfInfo);
			console.log(getUrlParams('channel'));
			console.log('============');
			this.$service.common.common.selfmallStatistics({
				app: 'self',
				channelId: getUrlParams('channel') || '',
				userId: selfInfo.user_id
			});
		},
		getSelfToken() {
			this.$service.common.common.selfmallLogin().then(res => {
				this.selfInfo = res;
				store.set('selfInfo', res);
			});
		},
		// 获取规则
		getRule() {
			axios({
				method: 'get',
				url: this.$selfUrl + '/api/activityRule?key=1'
			})
				.then(response => {
					console.log(response);
				})
				.catch(error => {
					if (error.status === 200) this.rule = error.data;
				});
		},
		show() {
			this.$refs['rules'].open();
			return;
			Dialog({ message: this.rule.content, title: this.rule.remarks });
		},
		getList() {
			if (!store.get('token')) store.set('token', this.$route.query.token);
			this.params.token = store.get('selfInfo').token;
			this.params.app = 'yzf';
			this.$service.free.index
				.getList(this.params)
				.then(res => {
					this.list.push(...res.list);
					this.params.page++;
					this.loading = false;
					if (res.list.length < this.params.size) {
						this.finished = true;
					} else {
						this.finished = false;
					}
					this.isRefresh = false;
				})
				.catch(err => {});
		},
		onRefresh() {
			this.list = [];
			this.params.page = 1;
			this.finished = true;
			this.getList();
		},
		toZFX() {
			this.$baiduPush('付邮即送', 'tap', '188红包跳转赚分享');
			window.location.href = 'https://zfx.xmonecode.com';
		},
		toCoupon(item) {
			let { token, expires_time } = store.get('selfInfo');
			expires_time = expires_time.substring(0, 19).replace(/-/g, '/');
			expires_time = new Date(expires_time).getTime();
			if (!item.receiveStatus && !item.isPurchase && item.couponId) {
				// 跳转优惠券列表
				window.location.href = `${this.$selfUrl}/coupon?token=${token}&expires_time=${expires_time}&couponId=${item.couponId}&gid=${item.gid}&from=free`;
				return;
			}
			if (!item.receiveStatus && !item.isPurchase && !item.couponId) {
				window.location.href = `${this.$selfUrl}/detail/${item.gid}?token=${token}&expires_time=${expires_time}&from=free`;
			}
		},
		move() {
			let time = setTimeout(() => {
				this.isAnimation = false;
				clearTimeout(time);
			}, 3000);

			let time2 = setTimeout(() => {
				this.isYao = true;
				clearTimeout(time2);
			}, 5000);
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	height: 388px;
	background-image: url('../../assets/images/free/aaa.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	.rule {
		position: absolute;
		top: 44px;
		right: 0;
		width: 94px;
		height: 50px;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		text-align: center;
		line-height: 50px;
		font-size: 28px;
	}
}
.box {
	background: #ff564e;
	min-height: calc(100vh - 388px);
	padding-bottom: 100px;
	padding-top: 20px;
	& > .title {
		width: 414px;
		height: 44px;
		margin: 0 auto;
		background-image: url('../../assets/images/free/bc_title.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 8px;
	}
}
.good {
	position: relative;
	width: 710px;
	padding: 12px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 16px;
	margin-top: 20px;
	@include flexBox(flex-start, flex-start);
	.info {
		// height: 268px;
		// overflow: hidden;
		width: 392px;
	}
	.good-pic {
		width: 268px;
		height: 268px;
		border-radius: 16px;
		margin-right: 20px;
	}
	.over-pic {
		width: 268px;
		height: 268px;
		border-radius: 16px;
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: 12px;
		left: 12px;
		z-index: 2;
		@include flexBox(center, center);
		& > div {
			width: 130px;
			height: 130px;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.3);
			@include flexBox(center, center);
			& > div {
				width: 105px;
				height: 105px;
				line-height: 100px;
				text-align: center;
				border-radius: 50%;
				border: 1px solid #fff;
				color: #fff;
				font-size: 28px;
				transform: rotate(-45deg);
			}
		}
	}
	font-size: 20px;
	.title {
		font-weight: bold;
		font-size: 28px;
		margin-bottom: 6px;
		@include ellipsis(1);
	}
	.num {
		margin-bottom: 4px;
		color: #696a6b;
		font-size: 24px;
		@include flexBox(flex-start, center);
		.sy {
			color: #ff261c;
		}
		.line {
			height: 18px;
			width: 2px;
			background-color: #ffc3c3;
			margin: 0 10px 0 10px;
		}
	}
	.momey {
		font-size: 28px;
		color: #ff261c;
		.zero {
			font-size: 40px;
			font-weight: bold;
		}
		.cen {
			margin-left: 18px;
			margin-right: 28px;
			font-size: 24px;
			font-weight: bold;
		}
		.past {
			font-size: 24px;
			text-decoration: line-through;
			color: #696a6b;
		}
	}
	.btn {
		width: 280px;
		height: 74px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: 48px;
		left: 105px;
		@include flexBox(space-between, center);
		div {
			width: 50%;
			text-align: center;
			color: white;
			font-size: 28px;
		}
		.lef {
			color: #ff3026;
			font-size: 24px;
		}
		.rig {
			font-weight: bold;
		}
		.disable {
			background-color: #f5f5f5;
		}
	}
	.btn2 {
		position: relative;
		top: 55px;
		left: 228px;
		width: 160px;
		line-height: 60px;
		border-radius: 38px;
		color: #fff;
		text-align: center;
		font-size: 28px;
		background-color: #ff564e;
	}
	.btn_c {
		background-image: url('../../assets/images/free/bc_btn.png');
	}
	.btn_d {
		background-image: url('../../assets/images/free/bc_btn_disable.png');
	}
}
.tip {
	width: 114px;
	height: 34px;
	position: absolute;
	top: 12px;
	left: 12px;
}
.gif {
	width: 150px;
	height: 150px;
	position: fixed;
	right: 26px;
	bottom: 220px;
	z-index: 10001;
}

@supports (bottom: env(safe-area-inset-bottom)) {
	.gif {
		margin-bottom: env(safe-area-inset-bottom);
	}
}
/deep/.van-list {
	padding-bottom: 140px;
}

.flex-icon {
	position: fixed;
	right: 63px;
	bottom: 226px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.flex-icon__img {
	max-width: 92px;
	height: 103px;
	position: relative;
	z-index: 20;
	margin-right: -10px;
}

.flex-icon__img.active {
	animation: z 6s linear infinite;
}

@keyframes z {
	10% {
		transform: rotate(15deg);
	}
	15% {
		transform: rotate(-10deg);
	}
	20% {
		transform: rotate(5deg);
	}
	30% {
		transform: rotate(-5deg);
	}
	35%,
	100% {
		transform: rotate(0deg);
	}
}

.flex-icon__value {
	width: 0px;
	height: 56px;
	border-radius: 0 28px 28px 0;
	background-color: #ffefc3;
	border: 2px solid #e3b450;
	color: #b17b08;
	font-size: 24px;
	font-weight: 600;
	line-height: 54px;
	margin-left: -10px;
	position: relative;
	overflow: hidden;
	text-indent: 20px;
	transition: width 2s;
	padding-right: 10px;
}

.flex-icon__value.active {
	width: 282px;
}

// 改写vant样式
/deep/.van-skeleton {
	margin-bottom: 20px;
	.van-skeleton__avatar {
		width: 268px !important;
		height: 268px !important;
		border-radius: 12px;
	}
	.van-skeleton__content {
		.van-skeleton__row {
		}
	}
}
/deep/.van-dialog__message {
	padding: 10px;
}
/deep/ .van-list__finished-text {
	color: white;
}
/deep/.van-pull-refresh__head {
	color: white;
}
/deep/.van-dialog {
	.van-dialog__header {
	}
	.van-dialog__message {
		text-align: left;
	}
}
</style>
